<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ArcGISDynamicMapService</title>
        <link rel="shortcut icon" href="img/favicon.png">
        <link rel="stylesheet" type="text/css" href="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css" />

        <script src="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/init.js"></script>


        <link rel="stylesheet" type="text/css" href="css/add1.css">
        <link rel="stylesheet" type="text/css" href="css/nav.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/font.css">
        <link rel="stylesheet" href="css/7b66cb1a.main.css">
       

        <style>
        /*     #mapContainer{
                position: relative;
                top: 52px;
            } */
             #DivFeature {
                width: 365px;
                height: 247px;
                margin-left: 5px;
                margin-top: 15px;
            }
           .none{display:none;}
           .left{float:left;width:170px;height:180px;}
           .right{float:left;width:170px;height:180px;box-sizing:border-box;overflow: auto;}
           #SelectAdd{padding-top:0px !important;}
        </style>
        <script>           
            var map;
            var newGraphic = null;
            var selectedTemplate;
            var newAttributes
            var myGraphicLayer;
            var myLayer = null;
            var myGraphic = null;
            var myJson = {};
            var Village;
            var People;
            var ObjecId;
            require([
                "esri/map",
                "esri/toolbars/draw",
                "esri/toolbars/edit",
                "esri/graphic",
                "esri/config",

                "esri/layers/FeatureLayer",
                "esri/layers/WebTiledLayer",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",

                "esri/dijit/editing/TemplatePicker",

                "dojo/_base/array",
                "dojo/_base/event",
                "dojo/_base/lang",
                "dojo/parser",
                "dijit/registry",

                "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
                "dijit/form/Button", "dojo/domReady!"
            ], function (
                Map, Draw, Edit, Graphic, esriConfig,
                FeatureLayer,WebTiledLayer,
                SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
                TemplatePicker,
                arrayUtils, event, lang, parser, registry
              ) {
                parser.parse();

                // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
                esriConfig.defaults.io.proxyUrl = "/proxy/";

                // This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
                esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://202.203.132.223:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

                var opts = {//extent:new esri.geometry.Extent({
                    //"xmin":103.6,
                    //"ymin":28.5,
                    //"xmax":104.2,
                    //"ymax":32.3,
                    //"spatialReference":{"wkid":4326},
                    //}),
                    center: [104.02, 27.83],
                    zoom: 13
                };

                map = new Map("mymap", opts);

                map.on("layers-add-result", initEditing);

                // var osmLayer = new esri.layers.OpenStreetMapLayer();
                // map.addLayer(osmLayer); //0
                var mapQuest = new esri.layers.WebTiledLayer("http://202.203.132.223:7999/offline/{level}/{col}/{row}.jpg", {
                   //"id": "mapQuest",
                   //"subDomains": mqSubDomains,
                   //"copyright": "MapQuest © 2012"
                   SpatialReference: 4326
               });
               var Street = new esri.layers.WebTiledLayer("http://202.203.132.223:7999/overlay_s/{level}/{col}/{row}.png", {
                   //"id": "mapQuest",
                   //"subDomains": mqSubDomains,
                   //"copyright": "MapQuest © 2012"
                   SpatialReference: 4326
               });
               map.addLayer(mapQuest);
               map.addLayer(Street);

                //var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
                //map.addLayer(myTiledMapServiceLayer);

                //var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://202.203.132.223:6080/arcgis/rest/services/subset_new/MapServer"); 
                //map.addLayer(tiledLayer);

                // var dynamiclayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://202.203.132.223:6080/arcgis/rest/services/遥感图/google18/MapServer");
                // map.addLayer(dynamiclayer);

                var myInfoTemplate = new esri.InfoTemplate("${Name}", "名称：${Name},${Village}");

                //var landuseLineLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/3", {
                //mode: FeatureLayer.MODE_SNAPSHOT,
                //infoTemplate:myInfoTemplate,
                //outFields: ["*"]
                //});

                var landusePointLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/0", {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    infoTemplate: myInfoTemplate,
                    outFields: ["*"]
                });

                map.addLayers([landusePointLayer]);
                dojo.connect(landusePointLayer, 'onClick', Jumper);
                //map.addLayers([landusePointLayer, landuseLineLayer]);
                //var myPoint=new esri.geometry.Point(104,24.8);
                //map.centerAt(myPoint);
                //map.centerAndZoom(myPoint,11);

                //var opener=window.opener;
                //var url=location.href;
                // var evt=url.evt; 
                //alert(url);
                var jump = GetRequest();
                if (jump != null) {
                    newAttributes = {};
                    newAttributes.Name = null;
                    newAttributes.Village = null;
                    newAttributes.Population = null;
                    newAttributes.Labor = null;
                    newAttributes.Reason = null;
                    newAttributes.PhoneNumbe = null;
                    newAttributes.Supporters = null;
                    newAttributes.Supporte_1 = null;
                    newAttributes.PovertySta = "贫困户";

                    //point symbol
                    var pointSymbol = new esri.symbol.SimpleMarkerSymbol();
                    pointSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
                    pointSymbol.setSize(12);
                    pointSymbol.setColor(new dojo.Color("#FFFFCC"));
                    var myPoint = new esri.geometry.Point(jump["longitude"], jump["latitude"]);
                    //var graphic = new esri.Graphic(myPoint, pointSymbol);
                    var graphic = new esri.Graphic();
                    graphic.setGeometry(myPoint);
                    //graphic.setInfoTemplate(InfoTemplate); 
                    graphic.setSymbol(pointSymbol);

                    myGraphicLayer = new esri.layers.GraphicsLayer();
                    map.addLayer(myGraphicLayer);
                    myGraphicLayer.add(graphic); //用默认的图层添加
                    map.centerAt(myPoint);
                    newGraphic = new Graphic(graphic.geometry, null, newAttributes);
                }




                function initEditing(evt) {
                    console.log("initEditing", evt);

                    // var map = this;
                    var currentLayer = null;
                    var layers = arrayUtils.map(evt.layers, function (result) {
                        return result.layer;
                    });
                    console.log("layers", layers);

                    var editToolbar = new Edit(map);
                    editToolbar.on("deactivate", function (evt) {
                        currentLayer.applyEdits(null, [evt.graphic], null);
                    });

                    arrayUtils.forEach(layers, function (layer) {
                        var editingEnabled = false;
                        layer.on("dbl-click", function (evt) {
                            event.stop(evt);
                            if (editingEnabled === false) {
                                editingEnabled = true;
                                editToolbar.activate(Edit.EDIT_VERTICES, evt.graphic);
                            } else {
                                currentLayer = this;
                                editToolbar.deactivate();
                                editingEnabled = false;
                            }
                        });

                        layer.on("click", function (evt) {
                            var attr = evt.graphic.attributes;
                            myLayer = layer;
                            myGraphic = evt.graphic;
                            dojo.byId("Name").value = attr["Name"];
                            dojo.byId("Village").value = attr["Village"];
                            dojo.byId("Population").value = attr["Population"];
                            dojo.byId("Labor").value = attr["Labor"]
                            dojo.byId("Reason").value = attr["Reason"]
                            dojo.byId("PhoneNumber").value = attr["PhoneNumbe"]
                            dojo.byId("Supporters").value = attr["Supporters"]
                            dojo.byId("SupportersInstitution").value = attr["Supporte_1"]


                            //var id=dojo.byId("PovertyState");
                            //var option=id.options;
                            //var value=id.value;
                            //var selected=option[value-1].innerHTML;
                            //newAttributes["PovertySta"]=selected;

                            event.stop(evt);
                            if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
                                layer.applyEdits(null, null, [evt.graphic]);
                                currentLayer = this;
                                editToolbar.deactivate();
                                editingEnabled = false;
                            }
                        });
                    });
                    //创建要素模板
                    var templatePicker = new TemplatePicker({
                        featureLayers: layers,
                        rows: "auto",
                        columns: 2,
                        grouping: true,
                        style: "height: auto; overflow: auto;"
                    }, "DivFeature");

                    templatePicker.startup();

                    var drawToolbar = new Draw(map);

                    templatePicker.on("selection-change", function () {
                        if (templatePicker.getSelected()) {
                            selectedTemplate = templatePicker.getSelected();
                        }
                        switch (selectedTemplate.featureLayer.geometryType) {
                            case "esriGeometryPoint":
                                drawToolbar.activate(Draw.POINT);
                                break; people
                            case "esriGeometryMultipoint":
                                drawToolbar.activate(Draw.MULTI_POINT);
                                break;
                            case "esriGeometryPolyline":
                                drawToolbar.activate(Draw.POLYLINE);
                                break;
                            case "esriGeometryPolygon":
                                drawToolbar.activate(Draw.POLYGON);
                                break;
                        }
                    });

                    drawToolbar.on("draw-end", function (evt) {
                        drawToolbar.deactivate();
                        editToolbar.deactivate();
                        newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
                        //point symbol
                        var pointSymbol = new esri.symbol.SimpleMarkerSymbol();
                        pointSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
                        pointSymbol.setSize(12);
                        pointSymbol.setColor(new dojo.Color("#FFFFCC"));
                        var graphicpoint = new esri.Graphic(evt.geometry, pointSymbol);
                        myGraphicLayer = new esri.layers.GraphicsLayer();
                        map.addLayer(myGraphicLayer);
                        myGraphicLayer.add(graphicpoint); //用默认的图层添加
                        newGraphic = new Graphic(evt.geometry, null, newAttributes);
                        //selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
                    });
                    dojo.connect(dojo.byId('save'), 'onclick', mySavePoint);
                    dojo.connect(dojo.byId('cancel'), 'onclick', myCancelSave);
                    dojo.connect(dojo.byId('reset'), 'onclick', myResetText);
                    dojo.connect(dojo.byId('saveChange'), 'onclick', mySaveChange);
                }

                function mySaveChange() {
                    var flag = false; //判断各个字段内容是否有改变
                    if (dojo.byId("Name").value == "") {
                        alert("名字不能为空！！");
                        return;
                    }
                    if (myGraphic == null) {
                        alert("请先选择元素！");
                        return;
                    }
                    newAttributes = myGraphic.attributes;
                    if (newAttributes["Name"] != dojo.byId("Name").value) {
                        alert("名字不同，不能修改！");
                        return;
                    }
                    if (dojo.byId("Village").value != newAttributes["Village"]) {
                        newAttributes["Village"] = dojo.byId("Village").value;
                        flag = true;
                    }
                    if (dojo.byId("Population").value != newAttributes["Population"]) {
                        if (dojo.byId("Population").value >= 0 && dojo.byId("Population").value <= 100) {
                            newAttributes["Population"] = dojo.byId("Population").value;
                            flag = true;
                        }
                        else {
                            alert("请输入数字！");
                            return;
                        }
                    }
                    if (dojo.byId("Labor").value != newAttributes["Labor"]) {
                        newAttributes["Labor"] = dojo.byId("Labor").value;
                        flag = true;
                        if (dojo.byId("Labor").value >= 0 && dojo.byId("Labor").value <= 100) {
                            newAttributes["Labor"] = dojo.byId("Labor").value;
                            flag = true;
                        }
                        else {
                            alert("请输入数字！");
                            return;
                        }
                    }
                    var id = dojo.byId("PovertyState");
                    var option = id.options;
                    var value = id.value;
                    var selected = option[value - 1].innerHTML;
                    if (newAttributes["PovertySta"] != selected) {
                        newAttributes["PovertySta"] = selected
                        flag = true;
                    }
                    if (dojo.byId("Reason").value != newAttributes["Reason"]) {
                        newAttributes["Reason"] = dojo.byId("Reason").value;
                        flag = true;
                    }
                    if (dojo.byId("PhoneNumber").value != newAttributes["PhoneNumbe"]) {
                        newAttributes["PhoneNumbe"] = dojo.byId("PhoneNumber").value;
                        flag = true;
                    }
                    if (dojo.byId("Supporters").value != newAttributes["Supporters"]) {
                        newAttributes["Supporters"] = dojo.byId("Supporters").value;
                        flag = true;
                    }
                    if (dojo.byId("SupportersInstitution").value != newAttributes["Supporte_1"]) {
                        newAttributes["Supporte_1"] = dojo.byId("SupportersInstitution").value;
                        flag = true;
                    }
                    if (flag == false) {
                        alert("内容无变化，无需修改！！")
                        return;
                    }
                    newGraphic = new Graphic(myGraphic.geometry, null, newAttributes);
                    myLayer.applyEdits(null, [newGraphic], null);
                    //myGraphicLayer.clear();
                    flag = false;
                    myLayer = null;
                    myGraphic = null;
                    myResetText();
                    newGraphic = null;
                    newAttributes = null;
                    alert("修改成功！")
                }

                function mySavePoint() {
                    if (newGraphic == null) {
                        alert("请先在地图上画新点！");
                        return;
                    }
                    if (dojo.byId("Name").value == "") {
                        alert("名字不能为空！！");
                        return;
                    }
                    newAttributes["Name"] = dojo.byId("Name").value;
                    if (dojo.byId("Village").value != "")
                        newAttributes["Village"] = dojo.byId("Village").value;
                    if (dojo.byId("Population").value != "")
                        if (dojo.byId("Population").value >= 0 && dojo.byId("Population").value <= 100)
                            newAttributes["Population"] = dojo.byId("Population").value;
                        else {
                            alert("请输入数字！");
                            return;
                        }
                    if (dojo.byId("Labor").value != "")
                        if (dojo.byId("Labor").value >= 0 && dojo.byId("Labor").value <= 100)
                            newAttributes["Labor"] = dojo.byId("Labor").value;
                        else {
                            alert("请输入数字！");
                            return;
                        }
                    var id = dojo.byId("PovertyState");
                    var option = id.options;
                    var value = id.value;
                    var selected = option[value - 1].innerHTML;
                    newAttributes["PovertySta"] = selected;
                    if (dojo.byId("Reason").value != "")
                        newAttributes["Reason"] = dojo.byId("Reason").value;
                    if (dojo.byId("PhoneNumber").value != "")
                        newAttributes["PhoneNumbe"] = dojo.byId("PhoneNumber").value;
                    if (dojo.byId("Supporters").value != "")
                        newAttributes["Supporters"] = dojo.byId("Supporters").value;
                    if (dojo.byId("SupportersInstitution").value != "")
                        newAttributes["Supporte_1"] = dojo.byId("SupportersInstitution").value;
                    selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
                    myGraphicLayer.clear();
                    newGraphic = null;
                    alert("保存成功！");
                }
                function myCancelSave() {
                    dojo.byId("Name").value = "";
                    dojo.byId("Village").value = "";
                    dojo.byId("Population").value = "";
                    dojo.byId("Labor").value = "";
                    dojo.byId("Reason").value = "";
                    dojo.byId("PhoneNumber").value = "";
                    dojo.byId("Supporters").value = "";
                    dojo.byId("SupportersInstitution").value = "";
                    myGraphicLayer.clear();
                    newGraphic = null;
                }
                function myResetText() {
                    dojo.byId("Name").value = "";
                    dojo.byId("Village").value = "";
                    dojo.byId("Population").value = "";
                    dojo.byId("Labor").value = "";
                    dojo.byId("Reason").value = "";
                    dojo.byId("PhoneNumber").value = "";
                    dojo.byId("Supporters").value = "";
                    dojo.byId("SupportersInstitution").value = "";
                }

            });
            function Jumper(evt) {
                var village = evt.graphic.attributes["Village"];
                var name = evt.graphic.attributes["Name"];
                var objectId = evt.graphic.attributes["OBJECTID"];
                Village = village;
                People = name;
                ObjecId = objectId;

                //myJumper();
            }
            function myJumper() {

                var el1 = document.getElementById('DivFeature');
                el1.className = 'none';
                var el2 = document.getElementById('DivBottom1');
                el2.removeAttribute('class');

                var text1 = escape(Village);
                var text = escape(People);
                var text3 = escape(ObjecId);

                if (text != "undefined") {

                    //window.location.assign("HtmlPage1.html?text=" + text + "&time=" + window.time);
                }
                else {
                    alert("请点击贫困户点！");
                }
            }
            function dumper() {
                var el1 = document.getElementById('DivBottom1');
                el1.className = 'none';
                var el2 = document.getElementById('DivFeature');
                el2.removeAttribute('class');

            }
            function upload() {
                //接收传来的名字
                GetRequest();
                //var file1 = document.getElementById("file1");
                var file1 = document.getElementById("doc");

                postFile(file1.files[0]);

                function postFile(data) {
                    //1.创建异步对象（小浏览器）
                    //setImagePreview(0);
                    var req = new XMLHttpRequest();
                    //2.设置参数
                    req.open("post", "Handler1.ashx", true);

                    //3.设置 请求 报文体 的 编码格式（设置为 表单默认编码格式）
                    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    // req.setRequestHeader("")
                    //4.设置回调函数
                    req.onreadystatechange = function () {
                        //请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功
                        if (req.readyState == 4 && req.status == 200) {

                            if (req.responseText != "上传出错！") {
                                changeName(req.responseText);
                            }
                        }
                    };
                    req.upload.addEventListener("progress", progressFunction, false); //注册进度条事件

                    //4.发送异步请求
                    req.send(data); //post传参在此处
                }

                function changeName(name) {
                    var file1 = document.getElementById("doc");
                    var realnew = file1.value;
                    //var realnamesplit =new Array();
                    var realnamesplit = realnew.split(".");
                    var realname = realnamesplit[0] + "$" + People + "." + realnamesplit[1];
                    var village = Village;
                    var objectid = ObjecId;
                    var req = new XMLHttpRequest();

                    //如果名称遇到中文，请在此处转码,然后放入url中
                    req.open("get", "Handler1.ashx?name=" + name + "&village=" + village + "&objectid=" + objectid + "&realname=" + realname, true);

                    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                    req.onreadystatechange = function () {
                        //请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功
                        if (req.readyState == 4 && req.status == 200) {
                            document.getElementById("sp").innerHTML = req.responseText + "<br/>" + realname;
                        }
                    };
                    //4.发送异步请求
                    req.send();
                }
            }

            function progressFunction(evt) {

                var progressBar = document.getElementById("progressBar");

                var percentageDiv = document.getElementById("percentage");

                if (evt.lengthComputable) {

                    progressBar.max = evt.total;

                    progressBar.value = evt.loaded;

                    percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

                }

            }

            //下面用于图片上传预览功能
            function setImagePreview(avalue) {
                var docObj = document.getElementById("doc");

                var imgObjPreview = document.getElementById("preview");

                if (docObj.files && docObj.files[0]) {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '150px';
                    imgObjPreview.style.height = '180px';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();

                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                }
                else {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag");
                    //必须设置初始大小
                    localImagId.style.width = "150px";
                    localImagId.style.height = "180px";
                    //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    }
                    catch (e) {
                        alert("您上传的图片格式不正确，请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }
                return true;
            }

            function GetRequest() {
                theRequest = People;
                return theRequest;
            }

        </script>
    </head>
 <body>
    <div id="mapContainer">
            <nav>
    
                    <div class="title">
                        <img src="img/font.png" alt="">
                    </div>
            
                    <div class="userinfo">
                        <a class="info-list" href="javascript:;">
                            <i class="icon icon-user-tie"></i>
                            <span>联系人:陈旭</span>
                        </a>
                         <!--<a class="info-list" href="javascript:;">
                            <i class="icon icon-r icon-envelop"></i>
                            <div class="noft-red">5</div>
                        </a>-->
                        <a class="info-list" href="javascript:;">
                            <i class="icon iconfont icon-contact"></i>
                          <span>电话:13888315351</span>
                        </a>
                         <!--<a class="info-list" href="javascript:;">
                            <i class="icon icon-cog"></i>
                        
                        </a>-->
            
                        
                    </div>
                    
           </nav>
           <div class="mapdiv" id="mapdiv">
               <div class="container">
                   <div class="top">
                           <div class="jiao"></div>
                           <div class="area form-group">
                              请选择扶贫区域：
                              <select id="fupinfield" class="form-control">
                                <option value="dongchuan">东川区</option>
                                <option value="daguan" selected="selected">大关县</option>
                              </select> 
                          
                            </div>
                            <div id="DivBottom"><a href="javascript:window.history.back(-1);">返回上一层</a></div>
                             
                   </div>
                   <div class="map">
                           <div id="mymap"></div>
                           <div id="SelectAdd" >
                               <div id="property">
                                   <form action="#">
                                       <fieldset>
                                       <legend>ProvertyInformation</legend>
                                           <table>
                                               <tr>
                                                   <td class="txt">*姓名: </td><td><input id="Name" type="text"></td>
                                               </tr>   
                                               <tr>  
                                                   <td class="txt">所属村: </td><td><input id="Village" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">人口数:</td><td> <input id="Population" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">劳动力数:</td><td> <input id="Labor" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">贫困状况:</td>
                                                   <td><select name="" id="PovertyState" >
                                                       <option value="1" selected="true">贫困户</option>
                                                       <option value="2" >脱贫户</option>
                                                   </select></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">致贫原因:</td><td><input id="Reason" type="text"></td>
                                               </tr>   
                                               <tr>    
                                                   <td class="txt">电话号码:</td><td><input id="PhoneNumber" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">挂包人:</td><td><input id="Supporters" type="text"></td>
                                               </tr>   
                                               <tr>    
                                                   <td class="txt">挂包单位:</td><td><input id="SupportersInstitution" type="text"></td>
                                               </tr>                             

                                           </table>

                                   </fieldset> 
                                       <div class="button">
                                           <input id="save" type="button" value="保存" >
                                           <input id="saveChange" type="button" value="修改" >
                                           <input id="reset" type="button" value="重置"> 
                                           <input id="cancel" type="button" value="取消">
                                           <input id="upload" type="button" value="上传" onclick="return myJumper()">
                                           <input id="return" type="button" value="返回" onclick="return dumper()">
                                       </div>

                                   </form>
                               </div>
                               <div id="DivFeature"></div>
                               <div id="DivBottom1" class="none">
                                   <div class="left">
                                        <form id="frm">

                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tbody>
                                        <tr>
                                        <td height="101" align="left">
                                           <div id="localImag"><img id="preview" src="" width="150" height="90" style="display: block; width: 150px; height: 180px;"></div>
                                        </td>
                                        </tr>
                                       
                                        </tbody>
                                        </table>

                                       </form>
                                   </div>
                                   <div class="right">
                                       选择要上传的文件:
                                        <input type="file" name="file" id="doc" style="width:180px;" onchange="javascript:setImagePreview();">
                                        
                                         <input type="button" value="提交" onclick="upload();" />
                                        <br />
                                       <span id="sp"></span> 

                                       <progress id="progressBar" value="0" max="100">

                                       </progress>

                                       <span id="percentage"></span>
                                   </div>
                               </div>

                           </div>
                           <div class="m-navigation-bar m-navigation">
                              <ul class="m-navigation--primary">
                                  <li class="nav-item nav-search">
                                       <span class="nav-item-icon">
                                          <img  title="搜索" class="" src="img/search.png" alt="" onclick=""/ >
                                       </span>
                                       <span class="nav-item-title">搜索</span>
                                       <span class="nav-item-background"></span>
                                  </li>
       
                            
                                  <li class="nav-item nav-select">
                                    <span class="nav-item-icon">
                                       <img  title="选择" class="" src="img/select.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">选择</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                                
                                  <li class="nav-item nav-add">
                                    <span class="nav-item-icon">
                                       <img  title="添加" class="" src="img/add.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">添加</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                               
                                  <li class="nav-item nav-location">
                                    <span class="nav-item-icon" >
                                        <img  title="定位" class="" src="img/location.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">定位</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                              </ul>
                           </div>
                   </div>
               </div>
               
                   
           </div>
           <div class="slider">  
               <ul>
                    <li id="manager"><img src="img/2d.png" style="width:80%;height:80%"><span>2D<br>平面</span></li>
                    <li onclick="return myUniqueRender()"><img src="img/xuanran.png" style="width:80%;height:80%"><span>分级<br> 渲染</span></li>
                    <li><img src="img/heatmap.png" style="width:80%;height:80%"><span>热度图</span></li>
                    <li onclick="return opensand()"><img src="img/3D.png" style="width:80%;height:80%"><span>2/3D联动</span></li>
                    <li onclick="return opentimeline()"><img src="img/fupin.png" style="width:80%;height:80%"><span>扶贫  <br>动态</span></li>
               </ul>
        </div>
 </div>
   
</body>
</html>